<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div class="heart-loading">
			<ul style="--line-count: 9">
				<li style="--line-index:1" class="line-1"></li>
				<li style="--line-index:2" class="line-2"></li>
				<li style="--line-index:3" class="line-3"></li>
				<li style="--line-index:4" class="line-4"></li>
				<li style="--line-index:5" class="line-5"></li>
				<li style="--line-index:6" class="line-6"></li>
				<li style="--line-index:7" class="line-7"></li>
				<li style="--line-index:8" class="line-8"></li>
                <li style="--line-index:9" class="line-9"></li>
			</ul>
		</div>

		<style>
			.heart-loading {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 200px;
				height: 200px;
				ul {
					display: flex;
					justify-content: space-between;
					width: 150px;
					height: 10px;
				}
				li {
					--Θ: calc(var(--line-index) / var(--line-count) * 0.5turn);
                    /* 每个li 相隔40ms */
					--time: calc((var(--line-index) - 1) * 40ms); 
                    list-style-type: none;
					border-radius: 5px;
					width: 10px;
					height: 10px;
					background-color: #3c9;
                    /* 滤镜的色相旋转`hue-rotate()` */
					filter: hue-rotate(var(--Θ));
					animation-duration: 1s;
					animation-delay: var(--time);
					animation-iteration-count: infinite;
                    /* 
                    第一条和第九条的高度一致，第二条和第八条的高度一致，依次类推，得到`高度变换相同类`的公式：`对称index = 总数 + 1 - index`
                    */
					&.line-1,
					&.line-9 {
						animation-name: beat-1;
					}
					&.line-2,
					&.line-8 {
						animation-name: beat-2;
					}
					&.line-3,
					&.line-7 {
						animation-name: beat-3;
					}
					&.line-4,
					&.line-6 {
						animation-name: beat-4;
					}
					&.line-5 {
						animation-name: beat-5;
					}
				}
			}
			@keyframes beat-1 {
				0%,
				10%,
				90%,
				100% {
					height: 10px;
				}
				45%,
				55% {
					height: 30px;
					transform: translate3d(0, -15px, 0);
				}
			}
			@keyframes beat-2 {
				0%,
				10%,
				90%,
				100% {
					height: 10px;
				}
				45%,
				55% {
					height: 60px;
					transform: translate3d(0, -30px, 0);
				}
			}
			@keyframes beat-3 {
				0%,
				10%,
				90%,
				100% {
					height: 10px;
				}
				45%,
				55% {
					height: 80px;
					transform: translate3d(0, -40px, 0);
				}
			}
			@keyframes beat-4 {
				0%,
				10%,
				90%,
				100% {
					height: 10px;
				}
				45%,
				55% {
					height: 90px;
					transform: translate3d(0, -30px, 0);
				}
			}
			@keyframes beat-5 {
				0%,
				10%,
				90%,
				100% {
					height: 10px;
				}
				45%,
				55% {
					height: 90px;
					transform: translate3d(0, -20px, 0);
				}
			}
		</style>
	</body>
</html>
